<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="../js/vue.js"></script>
        <script src="../js/axios.min.js"></script>
        <script src="../js/elementui.js"></script>
        <link rel="stylesheet" href="../css/index.css" />
        <script src="../js/jquery3.5.1.js"></script>
        <link href="../layui/css/layui.css" rel="stylesheet">
        <script src="../layui/layui.js"></script>
        <link href="../css/myvideo.css" rel="stylesheet">
        <script src="../js/jquery-cropper.js"></script>
        <link rel="stylesheet" href="../css/compile.css"/>
        <script src="../js/cropper.js"></script>
        <link rel="stylesheet" href="../css/cropper.css"/>
        <title>编辑个人信息</title>
        <script src="../js/compile.js"></script>
    </head>
    <body>
        <div id="app">
            <div id="topbox">
                <img width="100" class="bj" src="../img/背景.jpg">
                <img class="tou" id="upimg" src="../img/默认头像.png" />
                 <i id="iocntu" class="layui-icon layui-icon-camera-fill" style="font-size: 35px; color: #E8E8E8;"></i> 
                <span class="wen">点击修改头像</span>
            </div>
            <div id="bigbox">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="用户名">
                    <input v-model="form.username"></input>
                  </el-form-item>
                  <el-form-item label="逗比号">
                    <input readonly v-model="form.id"></input>
                  </el-form-item>
                  <el-form-item label="手机号">
                    <input  v-model="form.phone"></input>
                  </el-form-item>
                  <el-form-item label="地区">
                  <el-select id="sel" v-model="form.address" placeholder="请选择地区">
                        <el-option  label="湖南" value="shanghai"></el-option>
                        <el-option label="广东" value="beijing"></el-option>
                      </el-select>
                      </el-form-item>
                  <el-form-item label="个人签名">
                    <textarea rows="5" cols="5"  v-model="form.desc"></textarea>
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-radio-group v-model="form.sex">
                      <el-radio label="男"></el-radio>
                      <el-radio label="女"></el-radio>
                      <el-radio label="保密"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="danger">保存</el-button>
                    <el-button  onclick="location.href='mine.html'" class="qu">取消</el-button>
                  </el-form-item>
                </el-form>
            </div>
            <div id="updateimg">
                <div class="xiu">修改头像
                <i id="cha" class="layui-icon layui-icon-close" style="font-size: 20px; color: white;"></i> 
                </div>
                <div id="head">
                    <img id="headimg" style="overflow:hidden;" src="../img/默认头像.png"/>
                </div>
                <div id="xiaohead" style="overflow:hidden;"></div>
                <!-- <img id="xiaohead"  src="../img/默认头像.png"/> -->
                <span class="yulan">头像预览</span>
               <div id="huakuai">
                   <el-button type="danger" id="save">保存</el-button>
                   <el-button id="quimg" type="info">取消</el-button>
                </div>
                
            </div>
        </div>
    </body>
    <script>
        new Vue({
            el:"#app",
            data:{
                value3: 0,
                 form: {
                          username: '王的姓名',
                          phone: '13618423381',
                          desc: '本人是来自不列颠的19代皇子，还不速度关注！',
                          sex: '男',
                          address:'',
                          id:'114514'
                        }
            }
        })
    </script>
    
</html>